<template>
  <div class="twoDndList">
    <el-autocomplete
      class="search-model"
      v-model="queryString"
      :fetch-suggestions="querySearch"
      placeholder="模块搜索"
      icon="search"
    ></el-autocomplete>
    <div class="twoDndList-list left-part" :style="{width: width1}">
      <el-row>
        <draggable :list="filterList" class="dragArea" :options="{group: 'article'}" :move="checkMove" @start="onStart" @end="onEnd">
          <el-col class="list-complete-item" :span="currEle == element ? element.span : 8" :class="{dragging: currEle == element}" v-for="element in filterList">
            <div class="list-complete-item-handle">
              {{element.name}}
              <div class="line"></div>
              <div class="line"></div>
              <div class="line2"></div>
            </div>
          </el-col>
        </draggable>
      </el-row>
    </div>

    <div class="twoDndList-list right-part" :style="{width: width2}">
      <el-row>
        <draggable :list="list.list2" class="dropArea" :options="{group: 'article'}" @end="onEnd">
          <el-col :span="element.span || 8" class="list-complete-item" v-for="element in list.list2" key="element.id">
            <div class="list-complete-item-handle">
              {{element.name}}
              <div class="line"></div>
              <div class="line"></div>
              <div class="line2"></div>
            </div>
          </el-col>
        </draggable>
      </el-row>
    </div>
  </div>
</template>
</template>

<script>
    import draggable from 'vuedraggable'
    import debounce from 'debounce'
    
    export default {
      name: 'twoDndList',
      components: { draggable },
      computed: {
        filterList() {
          return this.list.list1.filter(item => item.name.indexOf(this.queryString) > -1)//.sort((a, b) => a.id >= b.id);
        },
        draggedCols() {
          var num = 0;
          this.list.list2.forEach(item => num += item.span);
          return num / 8;
        }
      },
      props: {
        list: {
          type: Object,
          default() {
            return {
              list1: [],
              list2: []
            }
          }
        },
        width1: {
          type: String,
          default: '40%'
        },
        width2: {
          type: String,
          default: '58%'
        }
      },
      data() {
        return {
          queryString: '',
          currEle: {
            type: Object,
            default: null
          },
          warn1: debounce(() => {
            this.$message({
              message: '卡片位置不能超过6个',
              type: 'warning'
            });
          }, 300),
          warn2: debounce(() => {
            this.$message({
              message: '不能设置三个长卡片',
              type: 'warning'
            });
          }, 300)
        }
      },
      methods: {
        checkMove(e) {
          var colNum = e.draggedContext.element.span / 8;
          // if (e.relatedContext.list == this.filterList) {
          //   return false;
          // }
          if (colNum + this.draggedCols > 6) {
            this.warn1();
            return false;
          }
          if (this.list.list2.length == 2 && this.draggedCols == 4 && colNum == 2) {
            this.warn2();
            return false;
          }
        },
        onStart(e) {
          this.currEle = this.filterList[e.oldIndex];
        },
        onEnd(e) {
          this.currEle = null;
          if (this.list.list2.length == 5) {
            if (this.list.list2[2].span == 16) {
              let item = this.list.list2[2];
              this.list.list2.splice(2, 1);
              this.list.list2.splice(3, 0, item);
            }
          } else if (this.list.list2.length == 4) {
            if (this.list.list2[0].span == this.list.list2[1].span) {
              let item = this.list.list2[1];
              this.list.list2.splice(1, 1);
              this.list.list2.splice(2, 0, item);
            }
          }
        },
        querySearch(queryString, cb) {
          var results = queryString ? this.filterList.filter(section => section.name.indexOf(queryString) > -1) : this.filterList;
          cb(results.map(item => { return {value: item.name}}));
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "../../styles/mixin";

  .config-dialog {
    position: relative;
    width: 700px;
    height: 500px;
    .search-model {
      position: absolute;
      top: -20px;
      right: 20px;
      width: 150px;
      input {
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        padding-left: 15px;
        border-radius: 50px;
        background: #f1f1f1;
        border: none;
      }
    }
    .el-message-box__header {
      .el-message-box__title {
        color: #666;
      }
      .el-message-box__headerbtn {
        display: none;
      }
    }
    .el-message-box__btns {
      position: absolute;
      right: 0;
      bottom:115px;
      .el-button {
        width: 100px;
        &:first-child {
          border: none;
        }
      }
    }
    .twoDndList {
        background: #fff;
        padding-bottom: 40px;
        &:after {
            content: "";
            display: table;
            clear: both;
        }
        .twoDndList-list {
            float: left;
            padding-bottom: 30px;
            &:first-of-type {
                margin-right: 2%;
            }
            &.left-part {
              border: 1px solid #f1f1f1;
              padding: 10px;
              height: 410px;
              overflow: auto;
              .list-complete-item {
                width: 50%;
              }
              
              @include scrollBar;
            }
            &.right-part {
              float: right;
              border: 1px dotted #dedede;
              padding: 10px;
              height: 250px;
              overflow: hidden;
              background: #f1f1f1;
            }
        }

        .list-complete-item {
            cursor: pointer;
            position: relative;
            font-size: 14px;
            padding: 3px 3px;
            height: 113px;
            transition: all 1s;
            &.dragging {
              background: #0f0;
            }
        }

        .list-complete-item-handle {
            color: #666;
            padding: 10px;
            height: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: #fff;
            border: 1px solid #dedede;
            box-shadow: 0 1px 2px #d6d6d6;
            .line {
              width: 100%;
              height: 14px;
              margin: 8px 0;
              background: #f1f1f1;
            }
            .line2 {
              width: 50%;
              height: 12px;
              background: #f1f1f1;
            }
        }

        .list-complete-item.sortable-chosen {
            // background: #50bfff;
        }

        .list-complete-enter, .list-complete-leave-active {
            opacity: 0;
        }
    }
  }
</style>
